<%-- 
    Document   : menusearch
    Created on : Nov 1, 2011, 11:51:50 PM
    Author     : mrteo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Accordion Menu Using jQuery</title>
        <script type="text/javascript" language="javascript" src="../js/jquery.js"></script>
        <script type="text/javascript">
        $(document).ready(function()
        {
                //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
                $("#firstpane p.menu_head").click(function()
            {
                        $(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
                $(this).siblings().css({backgroundImage:"url()"});
                });
                //slides the element with class "menu_body" when mouse is over the paragraph
                $("#secondpane p.menu_head").mouseover(function()
            {
                     $(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
                 $(this).siblings().css({backgroundImage:"images/url(left.png)"});
                });
        });
        </script>
        <style type="text/css">
        body {
                margin: 0px auto;
                font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
        }
        .menu_list {	
                width: 250px;
        }
        .menu_head {
                padding: 5px 10px;
                cursor: pointer;
                position: relative;
                margin:1px;
            font-weight:bold;
           background: #eef4d3 url(images/left.png) center right no-repeat;
        }
        .menu_body {
                display:none;
        }
        .menu_body a{
          display:block;
          color:#006699;
          background-color:#EFEFEF;
          padding-left:10px;
          font-weight:bold;
          text-decoration:none;
        }
        .menu_body a:hover{
          color: #000000;
          text-decoration:underline;
          }
        </style>
        </head>
        <body>
        <div style="float:left" > <!--This is the first division of left-->
          <div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
		<p class="menu_head">PACKAGE TOURS</p>
		<div class="menu_body">
                   <jsp:include page="searchTour.jsp"/>
		</div>
		<p class="menu_head">CARS</p>
		<div class="menu_body">
		   <jsp:include page="searchCard.jsp"/>
		</div>
		<p class="menu_head">HOTELS</p>
		<div class="menu_body">
                    <a href="#">Link-1</a>
                    <a href="#">Link-2</a>
                    <a href="#">Link-3</a>			
                </div>
                <p class="menu_head">FLIGHTS</p>
		<div class="menu_body">
                    <a href="#">Link-1</a>
                    <a href="#">Link-2</a>
                    <a href="#">Link-3</a>			
                </div>
  </div>  <!--Code for menu ends here-->
</div>
</body>
</html>
